<script>
let statusBarHeight;
//#ifdef H5
statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 5;
//#endif
// #ifdef APP-PLUS
statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 5;
//  #endif
// #ifdef MP-WEIXIN
statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 5;
//  #endif

export default {
    data() {
        return {
            /* 页面栈 */
            currentPage: null,
            /* 滚动高度 */
            scrollTop: 0,
            scrollTo: '',
            /* 滚动节流状态定时器 */
            scrollTime: null,
            /* 数据列表 */
            list: [],
            loading: false,
            /* 请求数据 */
            title: '',
            table: {
                pageNo: 1,
                pageSize: 20,
                totalPage: -1
            },
            /* 是否到底 */
            isFooter: !1,
        }
    },
    computed: {
        setHaderBar() {
            return `padding-top: ${statusBarHeight}px;`;
        },
        setPageContent() {
            return `height: calc(100% - ${statusBarHeight}px - 88rpx);`;
        },
    },
    onLoad(option) {
        this.currentPage = getCurrentPages();
        this.getList();
    },
    onShow() {

    },
    methods: {
        backClick() {
            if (this.currentPage.length >= 2) {
                uni.navigateBack({
                    delta: 1
                });
            } else {
                uni.switchTab({
				  url: "/pages/index/index"
				});
            }
        },
        scrollChange(e) {
            this.scrollTop = e.target.scrollTop;
        },
        scrolltolower(e) {
            if (this.scrollTime) {
                clearTimeout(this.scrollTime);
            }
            this.scrollTime = setTimeout(()=>{
                if (!this.loading && this.table.pageNo < this.table.totalPage) {
                    this.table.pageNo += 1;
                    this.getList();
                } else if (this.table.pageNo >= this.table.totalPage) {
                    this.isFooter = !0;
                }
                clearTimeout(this.scrollTime);
            }, 300)
        },
        scrollToTop() {
            this.scrollTo = -1;
            this.$nextTick(() => {
                this.scrollTo = 0;
            });
        },
        
		onPullDownRefresh() {
            this.list.length = 0;
            this.table.pageNo = 1;
            this.getList();
            setTimeout(()=>{
                uni.stopPullDownRefresh();
            }, 500)
		},
        async getList() {
            try {
                this.loading = !0;
                uni.showLoading({title:'加载中...'});
                const res = await this.$myRequest.get("/api/mobile/personnelOwner/getOrganRecruitList", {
                    title: this.title,
                    pageNo: this.table.pageNo,
                    pageSize: this.table.pageSize,
                });
                const data = res.organRecruitList;
                console.log(data);
                if (!data) {
                    throw Error('数据异常');
                }
                if (data.pageList.length) this.isFooter = !1;
                this.table.totalPage = Math.ceil(data.pageCount / data.pageSize);
                this.list.push(...data.pageList);
            } finally {
                this.loading = !1;
                uni.hideLoading();

            }
        },
        itemClick(e) {
            uni.navigateTo({
                url: `/pages_recruitMoney/organizationRecruit/details?id=${e.id}`
            });
        }
    }
}
</script>

<template>
    <view class="page">
        <view class="header-box" :style="setHaderBar">
            <view class="header-content">
                <image class="back" v-if="currentPage.length >= 2" @click="backClick" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"/>
                <image class="back" v-else @click="backClick" src="https://pic.bangbangtongcheng.com/273355a6b7cd4bcb8b4cf8baf9a4ad9a"></image>
                <view class="title">
                    机关招聘
                </view>
            </view>
        </view>
        <view class="page-content" :style="setPageContent">
            <scroll-view class="scroll-view" scroll-y :scroll-top="scrollTo" scroll-with-animation @scroll="scrollChange" @scrolltolower="scrolltolower">
                <view class="page-list">
                    <view v-for="item in list" :key="item.id" class="list-item" @click="itemClick(item)">
                        <image class="image" :src="item.image" mode="widthFix" />
                        <view class="item-content">
                            <view class="text">
                                {{ item.title }}
                            </view>
                            <view class="time">
                                发布日期:{{ item.updateDate && item.updateDate.split(' ')[0] || '' }}
                            </view>
                        </view>
                    </view>
                    <view v-show="isFooter" class="list-footer">-- 我是有底线的 --</view>
                    
					<view v-if="list.length == 0" class="none">
						<image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
						<view>没有更多数据了</view>
					</view>
                </view>
            </scroll-view>
            
            <view v-show="scrollTop > 20" class="to-top" @click.stop="scrollToTop">
                <image src="https://pic.bangbangtongcheng.com/static/top.png" />返回顶部
            </view>
        </view>
		<uniBall></uniBall>
    </view>
</template>

<style lang="less" scoped>
.page {
    --color-white: #fff;
    height: 100vh;
    background-color: var(--color-white);
    padding-bottom: calc(env(safe-area-inset-bottom) / 2);
    color: #333333;
    .header {
        &-box{
            // box-sizing: content-box;
            width: 100%;
            background-color: #69B6A8;
    
        }
        &-content {
            height: 88rpx;
            padding: 0 30rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            &::after {
                content: '';
                width: 40rpx;
                height: 40rpx;
            }
            .back {
                width: 40rpx;
                height: 40rpx;
            }
            .title {
                font-size: 36rpx;
                color: var(--color-white);
            }
        }
    } 
    .page-content {
        padding-bottom: 40rpx;
        .scroll-view {
            height: 100%;
        }
        .page-list {
            padding: 0 30rpx;
            .list-item {
                padding: 30rpx 0;
                border-bottom: 1rpx solid #E0E0E0;
                display: flex;
                align-items: center;
                height: 260rpx;
                .image {
                    width: 260rpx;
                    height: 200rpx;
                    border-radius: 24rpx;
                    background-color: gray;
                }
                .item-content {
                    padding-left: 30rpx;
                    display: flex;
                    flex-flow: column nowrap;
                    justify-content: space-between;
                    height: 100%;
                    width: calc(100% - 260rpx);
                    .text {
                        font-size: 32rpx;
                        line-height: 45rpx;
                        max-height: calc(100% - 40rpx);
                        -webkit-line-clamp: 3;
                        word-wrap: break-word;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                    }
                    .time {
                        font-size: 28rpx;
                        color: #999999;
                        text-align: right;
                        line-height: 40rpx;
                        height: 40rpx;
                    }
                }
            }
            .list-footer {
                padding: 20rpx;
                text-align: center;
            }
            .none {
                text-align: center;
            }
        }
    }
    

    .to-top {
        position: fixed;
        right: 30rpx;
        bottom: 154rpx;
        display: flex;
        align-items: center;
        padding: 10rpx 20rpx;
        background-color: #fff;
        border-radius: 34rpx;
        font-size: 26rpx;
        box-shadow: 0px 0px 36rpx rgba(0, 0, 0, 0.16);

        image {
            width: 46rpx;
            height: 46rpx;
            margin-right: 18rpx;
        }
    }
}

</style>